import { useState } from 'react'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
import './App.css'

const Item = ({item, index}) => {
  return (
    <Draggable draggableId={item.id+''} index={index}>
      {(provided, snapshot) => (
        <div
          className={`item ${snapshot.isDragging?'green':''}`}
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          {item.name}
        </div>
      )}
    </Draggable>
  )
}

const Row = ({ row, list, index }) => {
  return (
    <Draggable draggableId={row.id+''} index={index}>
      {(provided) =>
        <div className='row' ref={provided.innerRef} {...provided.draggableProps}>
          <h3 {...provided.dragHandleProps}>{row.name}</h3>
          <Droppable droppableId={row.id+''}>
            {(provided, snapshot) => (
              <div
                className={`list ${snapshot.isDraggingOver?'green':''}`}
                ref={provided.innerRef}
                {...provided.droppableProps}
              >
                { list.map(((m, index) => <Item key={'item_'+m.id} item={m} index={index} />)) }
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </div>
      }
    </Draggable>
  )
}

const App = () => {
  const [data, setData] = useState([
    {
      id: 30,
      name: '测试1',
      info: [
        { id: 100, name: '测试1' },
        { id: 101, name: '测试2' },
        { id: 102, name: '测试3' },
        { id: 103, name: '测试4' }
      ]
    },
    {
      id: 31,
      name: '测试2',
      info: []
    },
    {
      id: 32,
      name: '测试3',
      info: []
    }
  ])

  const onDragEnd = (result) => {
    const { destination, source, draggableId, type } = result
    console.log(destination, source, draggableId, type)
    if (!destination) return;
    // 分类之间的切换
    if (type === 'row') {
      if (destination.index === source.index) return;
      const arr = [...data]
      const sourceItem = arr[source.index] // 当前网站分类项
      arr.splice(source.index, 1) // 删除当前项
      arr.splice(destination.index, 0, sourceItem) // 在目标分类项的位置添加当前分类项
      console.log(arr) // 新的data数据
      return setData(arr)
    }
    // 网站分类项自己的网站之间进行排序
    if (destination.droppableId === source.droppableId) {
      if (destination.index === source.index) return;
      const arr = [...data]
      const sourceSortIndex = arr.map(m=>m.id).indexOf(source.droppableId-0) // 当前分类index
      const sourceSortList = arr[sourceSortIndex].info // 当前分类数组
      const sourceIndex = sourceSortList.map(m=>m.id).indexOf(draggableId-0) // 当前网站项index
      const sourceItem = sourceSortList[sourceIndex] // 当前网站项
      sourceSortList.splice(source.index, 1) // 删除当前项
      sourceSortList.splice(destination.index, 0, sourceItem) // 在目标项的位置添加当前项
      console.log(arr) // 新的data数据
      return setData(arr)
    }
    // 网站分类项的网站相互之间进行排序
    const arr = [...data]
    const sourceSortIndex = arr.map(m=>m.id).indexOf(source.droppableId-0) // 当前分类index
    const sourceSortList = arr[sourceSortIndex].info // 当前分类数组
    const sourceIndex = sourceSortList.map(m=>m.id).indexOf(draggableId-0) // 当前网站项index
    const sourceItem = sourceSortList[sourceIndex] // 当前网站项
    sourceSortList.splice(source.index, 1) // 删除当前项
    const targetSortIndex = arr.map(m=>m.id).indexOf(destination.droppableId-0) // 目标分类index
    const targetSortList = arr[targetSortIndex].info // 目标分类数组
    targetSortList.splice(destination.index, 0, sourceItem) // 在目标分类数组中添加当前项
    console.log(arr) // 新的data数据
    setData(arr)
  }
  return (
    <div className='app'>
      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId='all_box' type='row'>
          {(provided) =>
            <div className='box' ref={provided.innerRef} {...provided.droppableProps}>
            {
              data.map((m, index) => 
                <Row
                  key={'row_'+m.id}
                  index={index}
                  row={m}
                  list={m.info}
                />
              )
            }
            {provided.placeholder}
            </div>
          }
        </Droppable>
      </DragDropContext>
    </div>
  )
}

export default App
